<script setup>
import axios from 'axios';
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
import instance from '../utils/request';
import { creatschedule } from '../store/scheduleStore.js'
import { createuser } from '../store/userStore.js'

let schedule1 = creatschedule()
let user1 = createuser()

let router = useRouter()
let loginUser = reactive({
    username: '',
    userPwd: ''
})
let usernameMsg = ref('');
let userPwdMsg = ref('')
function checkUsername() {
    let userReg = /^[a-zA-Z0-9]{5,10}$/;
    if (!userReg.test(loginUser.username)) {
        usernameMsg.value = '格式错误'
        return false;
    }
    usernameMsg.value = 'OK'
    return true;
}
function checkUserPwd() {
    let userReg = /^[0-9]{5,10}$/;
    if (!userReg.test(loginUser.userPwd)) {
        userPwdMsg.value = '格式错误'
        return false;
    }
    userPwdMsg.value = 'OK'
    return true;
}
async function login() {
    let user = checkUsername();
    let password = checkUserPwd();
    if (user && password) {
        let { data } = await instance.post('/user/login', loginUser);
        if (data.code == 200) {
            user1.uid = data.data.loginUser.uid;
            user1.username = data.data.loginUser.username;
            console.log('登录成功', data.code);
            router.push('/showSchedule');
            alert('登录成功');
            // 可以在这里进行路由跳转或其他操作
        } else {
            alert('登录失败: ' + data.message);
        }
    }
}
</script>

<template>
    <div>
        <h3 class="ht">请登录</h3>
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" type="text" v-model="loginUser.username" @blur="checkUsername()">
                    <span id="usernameMsg" v-text="usernameMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" type="password" v-model="loginUser.userPwd" @blur="checkUserPwd()">
                    <span id="userPwdMsg" v-text="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="button" @click="login()" value="登录">
                    <input class="btn1" type="button" value="重置">
                    <router-link to="/regist">
                        <button class="btn1">去注册</button>
                    </router-link>
                </td>
            </tr>
        </table>
    </div>
</template>

<style scoped>
.ht {
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
}

.tab {
    width: 500px;
    border: 5px solid cadetblue;
    margin: 0px auto;
    border-radius: 5px;
    font-family: 幼圆;
}

.ltr td {
    border: 1px solid powderblue;
}

.ipt {
    border: 0px;
    width: 50%;
}

.btn1 {
    border: 2px solid powderblue;
    border-radius: 4px;
    width: 60px;
    background-color: antiquewhite;
}

#usernameMsg,
#userPwdMsg {
    color: gold;
}

.buttonContainer {
    text-align: center;
}
</style>
